<template>
  <div>
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" class="navbar" />
    <div class="box">为您搜索到以下结果</div>
    <van-tabs @click="onClick" class="sortnav">
      <van-tab title="综合" name="综合" class="active">
        <div class="sortlist">
          <router-link
            :to="{path: '/home/new/good',query:{id:item.id,openId:17516331686}}"
            class="item"
            v-for="item in keywords"
            :key="item.id"
          >
            <img :src="item.list_pic_url" alt />
            <p class="name">{{item.name}}</p>
            <p class="price">￥{{item.retail_price}}</p>
          </router-link>
        </div>
      </van-tab>
      <van-tab title="价格" name="价格" class="price">
        <div class="sortlist">
          <router-link
            :to="{path: '/home/new/good',query:{id:item.id,openId:17516331686}}"
            class="item"
            v-for="item in sortlist"
            :key="item.id"
          >
            <img :src="item.list_pic_url" alt />
            <p class="name">{{item.name}}</p>
            <p class="price">￥{{item.retail_price}}</p>
          </router-link>
        </div>
      </van-tab>
      <van-tab title="分类" name="分类">
        <div class="sortlist">
          <router-link
            :to="{path: '/home/new/good',query:{id:item.id,openId:17516331686}}"
            class="item"
            v-for="item in keywords"
            :key="item.id"
          >
            <img :src="item.list_pic_url" alt />
            <p class="name">{{item.name}}</p>
            <p class="price">￥{{item.retail_price}}</p>
          </router-link>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { helperaction } from "@/api/search";
export default {
  data() {
    return {
      keywords: [],
      flag: false,
      order: "asc",
      sortlist: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClick(name) {
      if (name == "价格") {
        this.flag = !this.flag;
        this.order = this.flag == true ? "asc" : "desc";
      }
      helperaction({
        keyword: this.$route.query.name,
        order: this.order
      }).then(res => {
        console.log(res);
        console.log(this.$route.query.name);
        this.sortlist = res.keywords;
      });
    }
  },
  created() {
    helperaction({
      keyword: this.$route.query.name,
      order: "asc"
    }).then(res => {
      console.log(res);
      console.log(this.$route.query.name);
      this.keywords = res.keywords;
    });
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.box {
  width: 100%;
  height: 1.44rem;
  margin-top: 1.226667rem;
  line-height: 1.44rem;
  text-align: center;
  font-size: 0.373333rem;
  background: #fff;
  border-bottom: 1px solid #ccc;
}
.sortnav {
  display: flex;
  background: #fff;
  display: inline-block;
  width: 100%;
  height: 1.04rem;
  line-height: 1.04rem;
}
.sortlist {
  margin-top: 0.26667rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 4.96667rem;
    margin-bottom: 0.06667rem;
    text-align: center;
    color: #4e4e4e;
    background: #fff;
    padding: 0.2rem 0;
    img {
      display: block;
      width: 4.02667rem;
      height: 4.02667rem;
      margin: 0 auto;
    }
    .name {
      margin: 0.2rem 0 0.29333rem 0;
      text-align: center;
      padding: 0 0.26667rem;
      font-size: 0.32rem;
    }
    .price {
      text-align: center;
      font-size: 0.4rem;
      color: #b4282d;
    }
  }
}
</style>